<template>
  <div>
    <v-dialog v-model="dialog.visible" persistent max-width="768">
      <v-card>
        <v-card-title v-if="data.id===''" class="headline">新增项目</v-card-title>
        <v-card-title v-else class="headline">修改项目</v-card-title>
        <v-card-text>
          <v-container class="pb-0" grid-list-md>
            <v-form ref="form" v-model="valid" lazy-validation>
              <v-layout wrap align-center>
                <v-flex class="mr-4" xs12 sm6>
                  <v-text-field :rules="rule.title" label="项目名称" v-model="data.title" required></v-text-field>
                </v-flex>
                <v-flex class="mr-4" xs12 sm6>
                  <v-text-field :rules="rule.trainTime" label="训练时间（秒）" v-model="data.trainTime" required></v-text-field>
                </v-flex>
                <v-flex class="mr-4" xs12>
                  <v-text-field :rules="rule.introduction" label="项目介绍" v-model="data.introduction" required></v-text-field>
                </v-flex>
                <v-flex xs12>
                  <description ref="description" v-model="data.description"></description>
                </v-flex>
                <v-flex xs12 class="ml-0 mr-0 mt-0 mb-0"></v-flex>
                <uploader class="ml-1" base="course/item/" ref="picUploader" refs="picUploader" title="图片上传" :max="1" :pic="true">
                  <template slot-scope="props">
                    <div class="upload-list">
                      <v-img :src="props.url" aspect-ratio="1" class="grey lighten-2" contain/>
                      <div style="flex-direction: column;" class="upload-list-hover d-flex" v-if="props.tool">
                        <div class="d-flex justify-space-between mt-3">
                          <v-icon class="font-white" @click="$refs[props.refs].left(props.index)">arrow_left</v-icon>
                          <v-icon class="font-white" @click="$refs[props.refs].right(props.index)">arrow_right</v-icon>
                        </div>
                        <div class="d-flex justify-space-between">
                          <v-icon class="font-white" @click="$refs[props.refs].upload(props.index)">refresh</v-icon>
                          <v-icon class="font-white" @click="$refs[props.refs].delete(props.index)">delete</v-icon>
                        </div>
                      </div>
                      <div style="flex-direction: column;" class="upload-list-hover align-center d-flex" v-if="props.progressVisible">
                        <v-progress-circular :rotate="-90" :size="100" :width="15" :value="props.progress" color="primary">{{ props.progress }}</v-progress-circular>
                      </div>
                    </div>
                  </template>
                  <div class="upload-list d-flex align-center" slot="add" slot-scope="props">
                    <v-icon style="font-size: 80px" @click="$refs[props.refs].upload(props.length)">add</v-icon>
                  </div>
                </uploader>
              </v-layout>
            </v-form>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat @click="dialog.visible=false">关闭</v-btn>
          <v-btn color="green darken-1" flat @click="checkForm">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import uploader from '../../components/Uploader'
import description from './Description'
import { Error } from '../../utils/error'
import { putCourseItem, postCourseItem } from '../../api/course'
export default {
  name: 'SubDialog',
  components: {
    description,
    uploader
  },
  props: {
    courseId: {}
  },
  data: () => ({
    dialog: {
      visible: false
    },
    valid: '',
    rule: {
      title: [v => !!v || '项目名称必须填写', v => (v && v.length <= 255) || '项目名称必须小于255个字符'],
      introduction: [v => !!v || '介绍必须填写', v => (v && v.length <= 255) || '介绍必须小于255个字符'],
      trainTime: [v => !!(v.toString()) || '训练时间必须填写', v => (v.toString() && (/(^0$)|(^[1-9]\d*$)/.test(v.toString()))) || '参数人数必须是自然数']
    },
    data: {
      id: '',
      title: '',
      introduction: '',
      trainTime: '',
      description: ''
    },
    index: ''
  }),
  methods: {
    show () {
      this.dialog.visible = true
    },
    clear () {
      this.data = {
        id: '',
        name: '',
        introduction: '',
        trainTime: '',
        description: ''
      }
      this.$refs.description.data = []
      this.$refs.picUploader.fileList = []
    },
    checkForm () {
      if (this.$refs.form.validate()) {
        if (this.$refs.picUploader.fileList.length === 0 || this.$refs.picUploader.fileList[0].src.length === 0) {
          Error(5000, '未上传图片')
        } else {
          let data = {
            courseId: this.courseId,
            title: this.data.title,
            picUrl: this.$refs.picUploader.fileList[0].src,
            trainTime: parseInt(this.data.trainTime),
            introduction: this.data.introduction,
            detailInfo: this.data.description
          }
          if (this.data.id === '') {
            putCourseItem(data).then((res) => {
              this.$emit('update')
              this.dialog.visible = false
            })
          } else {
            data.id = this.data.id
            postCourseItem(data).then((res) => {
              this.$emit('update')
              this.dialog.visible = false
            })
          }
        }
      }
    },
    get (data) {
      this.data.id = data.id
      this.data.title = data.title
      this.data.introduction = data.introduction
      this.data.trainTime = data.trainTime
      this.data.description = data.detailInfo
      this.$refs.description.get(data.detailInfo)
      this.$refs.picUploader.fileList = []
      this.$refs.picUploader.fileList.push({
        src: data.picUrl,
        toolVisible: false,
        progressVisible: false,
        progress: 0
      })
    }
  }
}
</script>

<style scoped>
</style>
